<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
</head>
<script th:src="@{/js/jquery-3.2.1.min.js}"></script>
<body>
<div class="container">
    <form id="formdata" onsubmit="return false">
        <div class="form-group">
            <label for="number">编号</label>
            <input type="text" class="form-control" value="" name="number" id="number">
        </div>
        <div class="form-group">
            <label for="name">书名</label>
            <input type="text" class="form-control" value="" id="name" name="name" placeholder="书名">
        </div>
        <div class="form-group">
            <label for="author">作者</label>
            <input type="text" class="form-control" value="" id="author" name="author" placeholder="作者">
        </div>
        <div class="form-group">
            <label for="press">出版社</label>
            <input type="text" class="form-control" value="" id="press" name="press" placeholder="出版社">
        </div>
        <div class="form-group">
            <label for="type">类型</label>
            <select name="type" id="type">
                <option th:value="${type.id}" th:each="type : ${pTypes}" th:text="${type.name}"></option>
            </select>
        </div>
        <button id="sub" class="btn btn-default">添加</button>
    </form>
</div>
</body>
<script>
    $(function () {
        $("#sub").click(function () {
            $.ajax({
                url:"/book/insert",
                type:"post",
                dataType:"json",
                data:$("#formdata").serialize(),
                success:function(data){
                    if(data.code==200){
                        alert("添加成功")
                    }
                }
            })
        })
    })
</script>
</html>